<!--
 * @Author: hucc
 * @Date: 2021-11-02 19:03:53
 * @LastEditors: hucc
 * @LastEditTime: 2021-11-02 19:13:00
 * @Description: 
-->
<template>
  <div>
    <div class='header'>
      <div class='photo'>
        <el-avatar :src='data.userFace' :size=50></el-avatar>
      </div>
      <span class='title' @click='handleClick'>修改头像</span>
    </div>
    <!-- 中间内容开始 -->
        <div class='main'>
        <el-row :gutter="10">
        <el-col :span=2><div class='font'>登录用户</div></el-col>
        <el-col :span=2><div class='font'>{{data.username}}</div></el-col>
        </el-row>
        <el-row :gutter="10">
        <el-col :span=2><div class='font'>用户姓名</div></el-col>
        <el-col :span=2><div class='font'>{{data.realname}}</div></el-col>
        </el-row>
        <el-row :gutter="10">
        <el-col :span=2><div class='font'>用户手机</div></el-col>
        <el-col :span=2><div class='font'>{{data.telephone}}</div></el-col>
        </el-row>
        <el-row :gutter="10">
        <el-col :span=2><div class='font'>用户性别</div></el-col>
        <el-col :span=2><div class='font'>{{data.gender}}</div></el-col>
        </el-row>
        <el-row :gutter="10">
        <el-col :span=2><div class='font'>用户生日</div></el-col>
        <el-col :span=2><div class='font'>{{data.birth}}</div></el-col>
        </el-row>
        <el-row :gutter="10">
        <el-col :span=2><div class='font'>注册时间</div></el-col>
        <el-col :span=2><div class='font'>{{data.registerTime}}</div></el-col>
        </el-row>
        <el-row :gutter="10">
        <el-col :span=2><div class='font'>邮箱</div></el-col>
        <el-col :span=2><div class='font'>{{data.email}}</div></el-col>
        </el-row>
        <el-row :gutter="10">
        <el-col :span=2><div class='font'>用户状态</div></el-col>
        <el-col :span=2><div class='font'><el-tag type="success">{{data.status}}</el-tag></div></el-col>
        </el-row>
        </div>
        
    <!-- /中间内容结束 -->
    <!-- 修改用户信息 -->
        <div class='modify' @click='toModify(form)'>修改用户信息</div>
    <!-- /修改用户信息成功 -->
    <!-- 修改用户头像模态框开始 -->
    <el-dialog title="修改头像" :visible.sync="dialogVisible" width="50%" style='height:800px' >
        <span>头像</span>
        <!-- 文件上传 -->
        <el-upload 
        class="avatar-uploader"
        :action="uploadFileURL"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="form.userFace" class="avatar" style='height:100px' >
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="dialogFooter">
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click='toSubmit'>确定</el-button>
        </span>
        </div>
    </el-dialog>
    <!-- /修改用户头像模态框结束 -->
    <!-- 修改用户信息开始 -->
    <el-dialog title="提示" :visible.sync="Visible">
    <el-form :model="form">
    <el-form-item label="登录用户" :label-width="formLabelWidth" prop='username'>
      <el-input v-model="form.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="用户姓名" :label-width="formLabelWidth" prop='realname'>
      <el-input v-model="form.realname" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label='性别' :label-width="formLabelWidth" prop='gender'>
        
    <el-radio v-model="form.gender" label="1">男</el-radio>
    <el-radio v-model="form.gender" label="2">女</el-radio>

    </el-form-item>
     <el-form-item label="用户手机" :label-width="formLabelWidth" prop='telephone'>
      <el-input v-model="form.telephone" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="用户邮箱" :label-width="formLabelWidth" prop='email'>
      <el-input v-model="form.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label='出生日期' :label-width="formLabelWidth" prop='birth'>
    <el-date-picker
      v-model="form"
      type="datetime"
      placeholder="选择日期时间"
      align="right"
      :picker-options="pickerOptions">
    </el-date-picker>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer1">
    <el-button @click="Visible = false">取 消</el-button>
    <el-button type="primary" @click="Visible = false">确 定</el-button>
  </div>
</el-dialog>
    <!-- /修改用户信息结束 -->
  </div>
</template>
<script>
  import {
    getToken
  } from '@/utils/auth'
  import {
    getInfo,
    alterUserFace
  } from '@/api/user'
  //引入上传图片文件
  import {
    showFileURL,
    uploadFileURL
  } from '@/utils/config'
  export default {
    data() {
      return {
        token: '',
        data: {},
        //模态框可见性
        dialogVisible:false,
        Visible:false,
        //图片显示的基础路径
        showFileURL,
        //图片上传的路径
        uploadFileURL,
        //图片地址
        imageUrl: '',
        //双向数据绑定form表单
        form: {},
        radio:1,
        //模态框输入框的长度
        formLabelWidth:'80px',
        pickerOptions:'',
      }
    },
    methods: {
        //获取token方法
      getLogin() {
        let res = getToken();
        // console.log(res);
        this.token = res;
      },
      //获取个人信息方法
      async getInfo(token) {
        let res = await getInfo(this.token);
          console.log(res.data);
        this.data = res.data;
        this.form=res.data;
      },
      //给修改头像绑定事件
      handleClick(){
          this.dialogVisible = true;
      },
        //图片上传成功的函数
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        //res图片上传成功的响应结果
        // console.log(res);
        //展示图片 图片基础路径+图片具体地址
        this.form.userFace = showFileURL + res.data.id
      },
      //图片上传之前的方法
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //给模态框确定按钮绑定事件
        async toSubmit(){
            let res=await alterUserFace(this.data.id);
            this.dialogVisible=false;
            this.$message({
            message: res.message,
            type: "success"
            });
        },
        //给修改用户信息绑定事件
        toModify(form){
            this.Visible=true;
            this.form=this.data;
        }
    },
    created() {
      this.getLogin();
      this.getInfo();
      // this.toSubmit();
      // this.toModify();
    }
  }

</script>
<style lang="scss">
  .header {
    height: 70px;
    border-bottom: 1px solid orange;
    position: relative;

    .photo {
      margin-left: 100px;
    }

    .title {
      position: absolute;
      top: 40px;
      right: 20px;
      font-size: 12px;
      color: rgb(44, 181, 172);
      cursor: pointer;
    }
  }
  .avatar-uploader{
      margin-left:50px;
      margin-top:-15px;
  }
.dialogFooter{
    border-top:1px solid orange;
    height: 50px;
    margin-top:10px;
}
.dialog-footer{
    float:right;
    margin-top:20px;
}
.el-row {
    margin-top: 20px;
}
.font{
    font-size:14px;
    font-family:'Microsoft YaHei';
}
.modify{
    color:rgb(44, 181, 172);
    float:right;
    margin-top:100px;
    font-size:12px;
    cursor:pointer;
}
</style>

